<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../echarts.min.js"></script>
    <script src="../jquery.min.js"></script>
    <script src="../theme/dark.js"></script>
</head>
<body style="width: auto;height:auto;">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: auto;height:800px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    CONFIG_OFFLINE_COLOR="red";
    CONFIG_ONLINE_COLOR="green";
    BASE_DATA_PATH=".";

    var cityCodes = {
        "内蒙古": "neimenggu",
        "呼和浩特市": "150100",
        "包头市": "150200",
        "乌海市": "150300",
        "赤峰市": "150400",
        "通辽市": "150500",
        "鄂尔多斯市": "150600",
        "呼伦贝尔市": "150700",
        "巴彦淖尔市": "150800",
        "乌兰察布市": "150900",
        "兴安盟": "152200",
        "锡林郭勒盟": "152500",
        "阿拉善盟": "152900"
    };


    var testMap = {};
    var myChart = echarts.init(document.getElementById('main'), "dark");
    var onlineCarsUrl = BASE_DATA_PATH+"/json/online_car.json";
    $.get(onlineCarsUrl, function (d){
        cityCarDatas=d;
    })

    function log(data) {
        console.log(data);
    }

    function getOnlineCars(cityName,dateType) {
        var wantData=[];
        if(cityName=="内蒙古")
        {
            wantData=cityCarDatas;
        }else if("children" in cityCarDatas &&cityName in cityCarDatas["children"])
        {
            wantData=cityCarDatas["children"][cityName];
        }
        var returnData= getCarDatasR(wantData,dateType);
        log(returnData)
        return returnData;
    }

    var pointFormatter = function (data) {
        log(data);
        return '车辆 ' + data.name;
    }

    var cityFormatter = function (data) {
        var cityName=data.name;
        if (cityName&&cityName in cityCarDatas.children)
        {
            var info=cityCarDatas.children[cityName].info;
            return data.name+" ("+ info+")";
        }else{
            return data.name+" 无车辆信息";
        }
    }

    function getCarDatasR(datas, dataType) {
        var carsData=[];
        if (datas instanceof Object )
        {
            if("children" in datas)//非底层数据集
            {
                for(var key in datas["children"])
                {
                    var subData=getCarDatasR(datas["children"][key],dataType);
                    carsData= carsData.concat(subData)
                }
            }else if ("cars" in datas){
                for(var key in datas["cars"])
                {
                    var car=datas["cars"][key];
                    if(car["is_online"]==dataType)
                    {
                        carsData.push(parseCarData(car))
                    }
                }
            }
        }
        return carsData;
    }
    function parseCarData(carData) {
        return {name:carData["name"],value:[carData["lng"],carData["lat"],,]};
    }

    function changeMap(name) {
        if (!(name in cityCodes)) {
            name="内蒙古";
        }
        var code = cityCodes[name];
        var uploadedDataURL = BASE_DATA_PATH+"/json/" + code + ".json";
        $.get(uploadedDataURL, function (d) {
            echarts.registerMap(code, d);
            var option = {
                title: {
                    text: '车辆在线状态图',
                    left: 'center'
                },
                legend: {
                    orient: 'vertical',
                    y: 'bottom',
                    x: 'right',
                    data: [{
                        name: '在线车辆',
                        // 强制设置图形为圆。
                        icon: 'rect',
                        // 设置文本为红色
                        textStyle: {
                            color: CONFIG_ONLINE_COLOR
                        }
                    }, {
                        name: '离线车辆',
                        // 强制设置图形为圆。
                        icon: 'rect',
                        // 设置文本为红色
                        textStyle: {
                            color: CONFIG_OFFLINE_COLOR
                        }
                    }],
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    show: true,
                    trigger: 'item',
                    formatter: cityFormatter
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'left',
                    top: 'top',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                geo: {
                    map: code,
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            show:false,
                            areaColor: '#323c48',
                            borderColor: '#111'
                        },
                        emphasis: {
                            show:false,
                            areaColor: '#2a333d'
                        }
                    }
                },
                series: [
                    {
                        name: '中国',
                        type: 'map',
                        mapType: code,
//                        selectedMode: 'multiple',
//                        roam: "scale",
//                        scaleLimit: {
//                            max: 1.5,
//                            min: 1,
//                        },
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    color: "#000000",
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: "#6bbfdd",
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                shadowBlur: 10,
                                shadowOffsetX: 5,
                                shadowOffsetY: 5,
                            },
                            emphasis: {
                                areaColor: "#fff",
                                shadowColor: 'rgba(0, 0, 0, 0.5)',
                                shadowBlur: 10,
                                shadowOffsetX: 5,
                                shadowOffsetY: 5,
                            }
                        },

                    }, {
                        name: '在线车辆',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        effect : {
                            show: true,
                            shadowBlur : 0
                        },
                        tooltip: {
                            show: true,
                            trigger: 'item',
                            formatter: pointFormatter
                        },
                        symbolSize:8,
                        rippleEffect:{
                            brushType:'stroke'
                        },
                        itemStyle: {
                            normal: {
                                show: true,
                                color:"green",
                            },
                            emphasis: {
                                show: true,
                                color:"#fff",
                            }
                        },
                        data:getOnlineCars(name,true),
                    },
                    {
                        name: '离线车辆',
                        type: 'scatter',
                        tooltip: {
                            show: true,
                            trigger: 'item',
                            formatter: pointFormatter
                        },
                        symbolSize:8,
                        coordinateSystem: 'geo',
                        itemStyle: {
                            normal: {
                                show: true,
                                color:CONFIG_OFFLINE_COLOR,
                            },
                            emphasis: {
                                show: true,
                                color:"#fff",
                            }
                        },
                        data: getOnlineCars(name,false)
                    }
                ]
            };
            myChart.setOption(option);
        });
    }

    changeMap("内蒙古");

    myChart.on("click", function (params) {
        // 控制台打印数据的名称
        changeMap(params.name);
    });
    //    myChart.on("mouseover ", function (params) {
    //        // 控制台打印数据的名称
    //       log(params);
    //    });
    //    myChart.on("mouseout ", function (params) {
    //        // 控制台打印数据的名称
    //       log(params);
    //    });
    //    myChart.on("mouseout ", function (params) {
    //        // 控制台打印数据的名称
    //       log(params);
    //    });
    //        myChart.set


</script>
</body>
</html>